<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>贵州历史文化网后台管理</title>
    <meta name="description" content="Restyling jQuery UI Widgets and Elements" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" href="__static__/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="__static__/assets/css/jquery-ui.custom.min.css" />
    <link rel="stylesheet" href="__static__/assets/css/font-awesome.min.css" />
    <link rel="stylesheet" href="__static__/assets/css/ace-fonts.css" />
    <link rel="stylesheet" href="__static__/assets/css/ace.min.css" id="main-ace-style" />
    <link rel="stylesheet" href="__static__/layui/css/layui.css" />
    
    <!--[if lte IE 9]>
			<link rel="stylesheet" href="__static__/assets/css/ace-part2.min.css" />
		<![endif]-->
    <!--[if lte IE 9]>
		  <link rel="stylesheet" href="__static__/assets/css/ace-ie.min.css" />
		<![endif]-->
    <script src="__static__/assets/js/ace-extra.min.js"></script>
    <!--[if lte IE 8]>
		<script src="__static__/assets/js/html5shiv.min.js"></script>
		<script src="__static__/assets/js/respond.min.js"></script>
		<![endif]-->
</head>

<body class="no-skin">
    <!-- #section:basics/navbar.layout -->
    <div id="navbar" class="navbar navbar-default">
        {include file="./public/top" /}
    </div>

    <!-- /section:basics/navbar.layout -->
    <div class="main-container" id="main-container">
        <!-- #section:basics/sidebar -->
        {include file="./public/left" /}


        <!-- /section:basics/sidebar -->
        <div class="main-content">
            <!-- #section:basics/content.breadcrumbs -->
            <div class="breadcrumbs" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li>
                        <i class="ace-icon fa fa-home home-icon"></i>
                        <a href="index.html">首页</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">轮播图管理</a>
                    </li>
                    <li>
                        <a href="form-wizard.html">轮播图列表</a>
                    </li>
                </ul><!-- /.breadcrumb -->

                <!-- #section:basics/content.searchbox -->
            </div>

            <!-- /section:basics/content.breadcrumbs -->
            <div class="page-content">
                <!-- /section:settings.box -->
                <div class="page-content-area">
                    <form class="form-horizontal" role="form" method="POST" enctype="multipart/form-data">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                      </fieldset>
                      <div class="layui-upload">
                        <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
                        <div class="layui-upload-list">
                          </div>
                        <button type="submit" class="layui-btn" id="test9">开始上传</button>
                      </div> 
                    </form>
                </div><!-- /.page-content-area -->
            </div><!-- /.page-content -->
        </div><!-- /.main-content -->


        <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
            <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
        </a>
    </div><!-- /.main-container -->

    <!-- basic scripts -->

    <!--[if !IE]> -->
    <script type="text/javascript">
        window.jQuery || document.write("<script src='__static__/assets/js/jquery.min.js'>" + "<" + "/script>");
    </script>

    <!-- <![endif]-->

    <!--[if IE]>
		<script type="text/javascript">
		 window.jQuery || document.write("<script src='__static__/assets/js/jquery1x.min.js'>"+"<"+"/script>");
		</script>
		<![endif]-->
    <script type="text/javascript">
        if ('ontouchstart' in document.documentElement) document.write("<script src='__static__/assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
    </script>
    <script src="__static__/assets/js/bootstrap.min.js"></script>

    <!-- page specific plugin scripts -->
    <script src="__static__/assets/js/jquery-ui.custom.min.js"></script>
    <script src="__static__/assets/js/jquery.ui.touch-punch.min.js"></script>
    <script src="__static__/assets/js/markdown/markdown.min.js"></script>
    <script src="__static__/assets/js/markdown/bootstrap-markdown.min.js"></script>
    <script src="__static__/assets/js/jquery.hotkeys.min.js"></script>
    <script src="__static__/assets/js/bootstrap-wysiwyg.min.js"></script>
    <script src="__static__/assets/js/bootbox.min.js"></script>

    <!-- ace scripts -->
    <script src="__static__/assets/js/ace-elements.min.js"></script>
    <script src="__static__/assets/js/ace.min.js"></script>
    <script src="__static__/layui/layui.js"></script>

    <!-- inline scripts related to this page -->
    <script type="text/javascript">

        //实例化编辑器
        //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    </script>
    <script>
        layui.use('upload', function(){
          upload = layui.upload;

           //选完文件后不自动上传
            upload.render({
                elem: '#test8'
                ,url: 'https://httpbin.org/post' //改成您自己的上传接口
                ,auto: false
                //,multiple: true
                ,bindAction: '#test9'
                ,done: function(res){
                layer.msg('上传成功');
                console.log(res)
    }
  });
          
        });
        </script>
    <script type="text/javascript">
        jQuery(function ($) {

            function showErrorAlert(reason, detail) {
                var msg = '';
                if (reason === 'unsupported-file-type') { msg = "Unsupported format " + detail; }
                else {
                    //console.log("error uploading file", reason, detail);
                }
                $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>' +
                    '<strong>File upload error</strong> ' + msg + ' </div>').prependTo('#alerts');
            }

            //$('#editor1').ace_wysiwyg();//this will create the default editor will all buttons

            //but we want to change a few buttons colors for the third style
            $('#editor1').ace_wysiwyg({
                toolbar:
                    [
                        'font',
                        null,
                        'fontSize',
                        null,
                        { name: 'bold', className: 'btn-info' },
                        { name: 'italic', className: 'btn-info' },
                        { name: 'strikethrough', className: 'btn-info' },
                        { name: 'underline', className: 'btn-info' },
                        null,
                        { name: 'insertunorderedlist', className: 'btn-success' },
                        { name: 'insertorderedlist', className: 'btn-success' },
                        { name: 'outdent', className: 'btn-purple' },
                        { name: 'indent', className: 'btn-purple' },
                        null,
                        { name: 'justifyleft', className: 'btn-primary' },
                        { name: 'justifycenter', className: 'btn-primary' },
                        { name: 'justifyright', className: 'btn-primary' },
                        { name: 'justifyfull', className: 'btn-inverse' },
                        null,
                        { name: 'createLink', className: 'btn-pink' },
                        { name: 'unlink', className: 'btn-pink' },
                        null,
                        { name: 'insertImage', className: 'btn-success' },
                        null,
                        'foreColor',
                        null,
                        { name: 'undo', className: 'btn-grey' },
                        { name: 'redo', className: 'btn-grey' }
                    ],
                'wysiwyg': {
                    fileUploadError: showErrorAlert
                }
            }).prev().addClass('wysiwyg-style2');


            $('[data-toggle="buttons"] .btn').on('click', function (e) {
                var target = $(this).find('input[type=radio]');
                var which = parseInt(target.val());
                var toolbar = $('#editor1').prev().get(0);
                if (which >= 1 && which <= 4) {
                    toolbar.className = toolbar.className.replace(/wysiwyg\-style(1|2)/g, '');
                    if (which == 1) $(toolbar).addClass('wysiwyg-style1');
                    else if (which == 2) $(toolbar).addClass('wysiwyg-style2');
                    if (which == 4) {
                        $(toolbar).find('.btn-group > .btn').addClass('btn-white btn-round');
                    } else $(toolbar).find('.btn-group > .btn-white').removeClass('btn-white btn-round');
                }
            });


            if (typeof jQuery.ui !== 'undefined' && ace.vars['webkit']) {

                var lastResizableImg = null;
                function destroyResizable() {
                    if (lastResizableImg == null) return;
                    lastResizableImg.resizable("destroy");
                    lastResizableImg.removeData('resizable');
                    lastResizableImg = null;
                }

                var enableImageResize = function () {
                    $('.wysiwyg-editor')
                        .on('mousedown', function (e) {
                            var target = $(e.target);
                            if (e.target instanceof HTMLImageElement) {
                                if (!target.data('resizable')) {
                                    target.resizable({
                                        aspectRatio: e.target.width / e.target.height,
                                    });
                                    target.data('resizable', true);

                                    if (lastResizableImg != null) {
                                        //disable previous resizable image
                                        lastResizableImg.resizable("destroy");
                                        lastResizableImg.removeData('resizable');
                                    }
                                    lastResizableImg = target;
                                }
                            }
                        })
                        .on('click', function (e) {
                            if (lastResizableImg != null && !(e.target instanceof HTMLImageElement)) {
                                destroyResizable();
                            }
                        })
                        .on('keydown', function () {
                            destroyResizable();
                        });
                }

                enableImageResize();


            }


        });
    </script>

</body>

</html>